<template>
  <div>
    <myheader>

    </myheader>
    <!--面包屑导航-->
    <Breadcrumb :datas="datas"></Breadcrumb>
    <section class="featured-block text-center">
      <div class="container">
        <p>Username:<input type="text" v-model="username"></p>
        <p>Password:<input type="password" v-model="password"></p>
        <p>Code:<input type="text" v-model="code"></p>
        <p><img :src="src" alt="验证码" @click='gitcodeimg'></p>
        <p>验证码不清楚?点击图片刷新验证码</p>
        <p>
          <Button @click="registeruser">注册</Button>&nbsp;&nbsp;<Button color="blue" @click="reset">重置</Button>
        </p>
      </div>
    </section>
    <mytail>

    </mytail>
  </div>
</template>

<script>
  // 导包
  import myheader from './myheader.vue'
  import mytail from "./mytail";
  import {config} from "../config";

  export default {
    name: "register",
    data() {
      return {
        datas: [
          {'title': '首页', route: {name: 'index'},},
          {'title': '注册页面'},
          {'title':'登陆页面', route: {name:'login'}}
        ],
        username: '',
        password: '',
        code: '',
        src: 'http://127.0.0.1:8000/code/'
      }
    },
    //注册组件标签
    components: {
      'myheader': myheader,
      'mytail': mytail
    },
    methods: {
      // 获取新的验证码
      gitcodeimg(){
        var codenum = Math.random()
        this.src = 'http://127.0.0.1:8000/code/?code=' + codenum
      },
      // 注册
      registeruser() {
        if (this.username === '') {
          return this.$Message('用户名为空')
        }
        if (this.password === '0') {
          return this.$Message('密码为空')
        }
        this.axios.get(config['register'], {
          params: {
            username: this.username,
            password: this.password,
            code: this.code
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.$Message(res.data.data)
            this.$router.push('login/')
          } else {
            this.$Message(res.data.data)
          }
        })
      },
      // 重置
      reset() {
        this.username = '';
        this.password = '';
        this.code = '';
        this.gitcodeimg()
      }
    }
  }
</script>

<style scoped>

</style>
